<template>
  <div class="dashboard">
    <n-card :title="t('dashboard.title')" class="mb-4">
      <n-grid cols="4" :x-gap="16" :y-gap="16">
        <n-grid-item>
          <n-statistic :label="t('dashboard.totalNews')" :value="statistics.totalNews">
            <template #prefix>
              <n-icon color="#18a058">
                <Icons name="newspaper-outline" />
              </n-icon>
            </template>
            <template #suffix>
              <n-text depth="3" style="font-size: 12px">
                {{ t('dashboard.todayNews') }}: {{ statistics.todayNews }}
              </n-text>
            </template>
          </n-statistic>
        </n-grid-item>
        <n-grid-item>
          <n-statistic :label="t('dashboard.totalUsers')" :value="statistics.totalUsers">
            <template #prefix>
              <n-icon color="#2080f0">
                <Icons name="people-outline" />
              </n-icon>
            </template>
            <template #suffix>
              <n-text depth="3" style="font-size: 12px">
                {{ t('dashboard.todayUsers') }}: {{ statistics.todayUsers }}
              </n-text>
            </template>
          </n-statistic>
        </n-grid-item>
        <n-grid-item>
          <n-statistic :label="t('dashboard.totalComments')" :value="statistics.totalComments">
            <template #prefix>
              <n-icon color="#f0a020">
                <Icons name="chatbox-ellipses-outline" />
              </n-icon>
            </template>
            <template #suffix>
              <n-text depth="3" style="font-size: 12px">
                {{ t('dashboard.todayComments') }}: {{ statistics.todayComments }}
              </n-text>
            </template>
          </n-statistic>
        </n-grid-item>
        <n-grid-item>
          <n-statistic :label="t('dashboard.totalReports')" :value="statistics.totalReports">
            <template #prefix>
              <n-icon color="#d03050">
                <Icons name="warning-outline" />
              </n-icon>
            </template>
            <template #suffix>
              <n-text depth="3" style="font-size: 12px">
                {{ t('dashboard.todayReports') }}: {{ statistics.todayReports }}
              </n-text>
            </template>
          </n-statistic>
        </n-grid-item>
      </n-grid>
    </n-card>

    <n-grid cols="2" :x-gap="16">
      <n-grid-item>
        <n-card :title="t('dashboard.newsChart')">
          <div class="chart-container">
            <div v-for="item in chartData.newsChart" :key="item.date" class="chart-item">
              <div class="chart-label">{{ item.date }}</div>
              <div class="chart-bar">
                <div 
                  class="chart-bar-fill" 
                  :style="{ width: `${(item.count / maxNewsCount) * 100}%` }"
                ></div>
              </div>
              <div class="chart-value">{{ item.count }}</div>
            </div>
          </div>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card :title="t('dashboard.userChart')">
          <div class="chart-container">
            <div v-for="item in chartData.userChart" :key="item.date" class="chart-item">
              <div class="chart-label">{{ item.date }}</div>
              <div class="chart-bar">
                <div 
                  class="chart-bar-fill user-chart" 
                  :style="{ width: `${(item.count / maxUserCount) * 100}%` }"
                ></div>
              </div>
              <div class="chart-value">{{ item.count }}</div>
            </div>
          </div>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { 
  NCard, 
  NGrid, 
  NGridItem, 
  NStatistic, 
  NIcon, 
  NText,
  useMessage
} from 'naive-ui'
import Icons from '@/components/Icons.vue'
import { dashboardApi } from '@/api'

const { t } = useI18n({ useScope: 'global' })
const message = useMessage()

const loading = ref(false)
const statistics = ref({
  totalNews: 0,
  todayNews: 0,
  totalUsers: 0,
  todayUsers: 0,
  totalComments: 0,
  todayComments: 0,
  totalReports: 0,
  todayReports: 0
})

const chartData = ref({
  newsChart: [],
  userChart: []
})

const maxNewsCount = computed(() => {
  if (chartData.value.newsChart.length === 0) return 1
  return Math.max(...chartData.value.newsChart.map(item => item.count))
})

const maxUserCount = computed(() => {
  if (chartData.value.userChart.length === 0) return 1
  return Math.max(...chartData.value.userChart.map(item => item.count))
})

const loadDashboardData = async () => {
  try {
    loading.value = true
    const response = await dashboardApi.getStatistics()
    if (response.success) {
      statistics.value = response.data.statistics
      chartData.value = response.data.chartData
    }
  } catch (error) {
    message.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadDashboardData()
})
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}

.chart-container {
  padding: 16px 0;
}

.chart-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.chart-label {
  width: 80px;
  font-size: 14px;
  color: #666;
}

.chart-bar {
  flex: 1;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  margin: 0 16px;
  position: relative;
}

.chart-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #18a058, #36ad6a);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.chart-bar-fill.user-chart {
  background: linear-gradient(90deg, #2080f0, #4098fc);
}

.chart-value {
  width: 60px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
}
</style>